<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import MainFrame from '/@/components/chat/MainFrame.vue'

export default defineComponent({
  name: 'LoginPage',
  components: {MainFrame},
  setup() {
    const name = ref("jackieChen");
    const state = reactive({
      bg: 'https://jc-personal.obs.cn-southwest-2.myhuaweicloud.com/public/image/chat/im_bg_7389562736492764357834234.jpg'
    })
    return {
      name,
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="base-wrap" :style="{backgroundImage:'url('+ bg +')'}">
    <MainFrame/>
  </div>
</template>

<style scoped lang="scss">
.base-wrap {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>
